<template>
  <!-- 安全交底记录 -->
  <base-breadcrumb>
    <searchData :searchData="searchOptions" @search="handleSearch" />

    <div class="page-body">
      <a-card :bordered="false">
        <!-- <title-name title="月安全交底记录" /> -->
        <a-button type="primary" class="mb20p"
                  v-btn-permission="'hse_022_add_01'"
                  @click="$router.push({name:'safteyClosureRecordAddPlanOut',query:{pageType:'edit'}})"
                  v-if="hideBuquBtn()">
          新增计划外交底
        </a-button>
        <!-- 统计 -->
        <!--   月安全交底计划项总数：10 个 | 已提交记录：5 个 |未提交记录数：5 个 -->
        <div class="pub-table-select-count">
          <a-icon type="info-circle" theme="twoTone" />
          <span style="margin-right: 12px"> 月安全交底计划项总数：
                    <span class="totalNum">{{ totalDetails.total }}</span>
                    <span>个{{ '  |  ' }}已提交记录</span>
                    <span class="totalNum">{{ submited }}</span> 个
                  </span>
        </div>
        <!-- 统计 -->
        <list-table
          ref="table"
          size="default"
          rowKey="key"
          :columns="columns"
          :request="loadData"
          :alert="true"
          show-size-changer
          show-quick-jumper
          showPagination="auto"
        >
          <template slot="sort" slot-scope="text, record, index">{{ index + 1 }}</template>
          <template slot="auditStatus" slot-scope="text, record">
            <list-status v-if="record.auditStatus != null" :status="record.auditStatus" conversion="en" :text="text" />
            <span v-else>未填报</span>
          </template>

          <template slot="operator" slot-scope="text, record">
            <MoreButton>
              <a @click="handleUpdate('look', record)" v-btnPermission="'hse_022_loo_04'">查看</a>
<!--              <span @click="handleDel(record)" v-btnPermission="'hse_022_del_03'">删除</span>-->

              <a v-if="(record.safetyConfessRecordType == 0 &&  record.auditStatus == 'DRAFT')&&hideBuquBtn()"
                    @click="handleUpdate('edit', record)"
                    v-btnPermission="'hse_022_edi_02'"
              >填报</a>
              <template
                v-if="record.safetyConfessRecordType === 1"
              >
                <a v-btn-permission="'hse_022_edi_02'"
                      v-if="(record.auditStatus === 'DRAFT' || record.auditStatus === 'REJECTED')&&hideBuquBtn()"
                      @click="handleUpdate('edit', record)">编辑</a>
                <a @click="handleDel(record)" v-btnPermission="'hse_022_del_03'">删除</a>
              </template>
            </MoreButton>
          </template>
        </list-table>
      </a-card>
    </div>
  </base-breadcrumb>
</template>

<script>
import { STable } from '@/components'
import ThemeChoose from '@/components/themeChoose/themeChoose.vue'
import {
  getSafteyRecordList,
  deleteSafteyRecord,
  getSafteyRecordCount, deleteSafteyRecord2
} from '@/api/safetySupervision/safteyClosureRecord'
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject' // 项目
import OrgTreeSelect from '@/components/OrgTreeSelect'
import SelectSubcontractor from '@/components/Select/SelectSubcontractor' // 分包商
import StatusDisplay from '@/components/StatusDisplay'
import Vue from 'vue'

const searchOptions = [
  {
    name: '所属单位',
    valueKey: 'searchQuery',
    type: OrgTreeSelect,
  },
  // {
  //   name: '所属分公司',
  //   valueKey: 'branchComId',
  //   type: SelectSubCompany
  // },
  // {
  //   name: '所属项目',
  //   keyValue: 'branchComId',
  //   valueKey: 'projectId',
  //   type: SelectProject
  // },
  // {
  //   name: '交底单位',
  //   keyValue: 'projectId',
  //   valueKey: 'discloseDeptIds',
  //   type: SelectSubcontractor,
  //   mode: 'multiple'
  // },
  // {
  //     name: '工种',
  //     value: 'workType',
  //     type: 'input',
  // },
  {
    name: '交底人',
    value: 'employeeName',
    type: 'input'
  },
  {
    name: '月份',
    value: 'month',
    type: 'month'
  },
  {
    name: '交底时间',
    value: 'confessDate',
    type: 'dateRangeFormat'
  },
  {
    name: '状态',
    value: 'auditStatus',
    type: 'select',
    data: [
      {
        value: 'DRAFT',
        label: '未提交'
      },
      {
        value: 'SUBMITTED',
        label: '已提交'
      }
    ]
  }
]
const columns = [
  {
    title: '序号',
    dataIndex: 'sort',
    scopedSlots: { customRender: 'sort' },
     width: 60
  },
  {
    title: '安全技术交底名称',
    dataIndex: 'name',
    width: 250
  },
  {
    title: '分公司名称',
    dataIndex: 'branchComName',
    width: 150
  },
  {
    title: '项目名称',
    dataIndex: 'projectName',
    width: 250
  },
  {
    title: '交底类型',
    dataIndex: 'safetyConfessRecordTypeStr',
    width: 100
  },
  {
    title: '计划交底时间',
    dataIndex: 'drillDate',
    width: 120
  },
  {
    title: '实际交底时间',
    dataIndex: 'confessDate',
    width: 120
  },
  {
    title: '交底人',
    dataIndex: 'employeeName',
    width: 150
  },
  {
    title: '状态',
    dataIndex: 'auditStatus',
    scopedSlots: { customRender: 'auditStatus' },
    width: 150
  },
  {
    title: ' 操作',
    dataIndex: 'operator',
    scopedSlots: { customRender: 'operator' },
    width: 150
  }
]
export default {
  name: 'a' + Date.now(), components: {
    ThemeChoose,
    STable,
    StatusDisplay
  },
  data() {
    this.searchOptions = searchOptions
    this.columns = columns
    return {
      queryParam: {},
      totalDetails: {
        total: 0,
        draft: 0,
        submitted: 0,
        past: 0,
        rejected: 0
      },
      loadData: async (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        this.getSafteyRecordCount(this.queryParam)
        return await getSafteyRecordList(requestParameters)
      }
    }
  },
  computed: {
    submited() {
      return this.totalDetails.submitted + this.totalDetails.past + this.totalDetails.rejected
    },
    noSubmit() {
      return this.totalDetails.total - this.submited
    }
  },
  methods: {
    handleSearch(val = {}) {
      this.queryParam = {
        ...val
      }
      this.$refs.table.refresh(true)
    },
    async handleDel(data = {}) {
      this.$delList3(deleteSafteyRecord2, () => {
        this.$refs.table.refresh(true)
      }, { id: data.id })
    },
    editPlanOut(row) {
      this.$router.push({ name: 'safteyClosureRecordAddPlanOut', query: { pageType: 'edit', id: row.id } })
    },
    // 处理更新操作（新增、编辑）
    handleUpdate(type, data = {}) {
      this.$router.push({
        name: data.safetyConfessRecordType === 1 ? 'safteyClosureRecordAddPlanOut' : 'UpdateSafteyClosureRecord',
        query: {
          id: data.id,
          pageType: type
        }
      })
    },
    // 统计
    async getSafteyRecordCount(param) {
      const res = await getSafteyRecordCount(param)
      if (res.code === 200) {
        this.totalDetails = res.data
      }
    }
  }
}
</script>

<style lang="less" scoped>
.page-header {
  .header-row {
    display: flex;

    .flex-content {
      flex: auto;
    }

    .divider {
      margin: 0 12px;
    }

    .expand-btn {
      margin-left: 8px;
      font-size: 14px;
    }
  }
}

.page-body {
  .table-operateors {
    .ant-btn + .ant-btn {
      margin-left: 12px;
    }
  }
}
</style>
